/**
* Created By wifi_uncle on 2019/12/30
*/
<template>
  <div class="table-container">
    <el-table
      :data="data"
      :show-summary="showSummary"
      v-loading="loading"
      border
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column
        :type="type"
        :label="indexLabel"
        width="50">
      </el-table-column>
      <el-table-column
        v-for="item in columns"
        :prop="item.prop"
        :width="item.width"
        :key="item.prop"
        :label="item.label">
      </el-table-column>
      <el-table-column
        v-if="showHandle"
        label="操作"
        width="240">
        <template slot-scope="scope" >
          <slot name="handle" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <qf-pagination
      v-if="showPagination"
      :total="pagination.total"
      :page-size="params.pageSize"
      :current-page="params.pageNo"
      @size-change="pageSizeChange"
      @current-change="pageNoChange">
    </qf-pagination>
  </div>
</template>

<script>
// import { Config } from '@/js/base'
import QfPagination from './QfPagination.vue'
export default {
  name: 'CommonTable',
  components: {
    QfPagination
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 列表数据
     */
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: '',
    },
    indexLabel: {
      type: String,
      default: '',
    },
    /**
     * 列
     */
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 是否显示操作栏
     */
    showHandle: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示分页组件
     */
    showPagination: {
      type: Boolean,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: true
    },
    /**
     * 分页
     */
    pagination: {
      type: Object,
      default: () => {
        return {
          total: 0,
          current: 1,
          pageSize: 10, // Config.PAGE_SIZE,
          pageNo: 1, // Config.PAGE_NO
        }
      }
    },
    onChange: {
      type: Function,
      default: () => {
        return () => {}
      }
    },

  },
  data () {
    return {
      params: {
        pageSize: this.pagination.pageSize,
        pageNo: this.pagination.pageNo,
      }
    }
  },
  methods: {
    pageNoChange (pageNo) {
     console.log('pageNo = ' + pageNo)
      this.params.pageNo = pageNo
      this.pageChange(this.params)
    },
    pageSizeChange (pageSize) {
      console.log('pageSize = ' + pageSize)
      this.params.pageSize = pageSize
      // this.$emit('size-change', pageSize)
      this.pageChange(this.params)
    },
    pageChange (val) {
      this.$emit('page-change', val)
    },
    // indexNo (index) {
    //   return (this.params.pageSize * (this.params.pageNo - 1)) + index + 1
    // }
  },
  watch: {
    pagination: {
      handler (val) {
        debugger
        if(val) {
          this.params.pageSize = val.pageSize
          this.params.pageNo = val.pageNo
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
